<template>
  <div class="app-container documentation-container">
    <el-card shadow="never" style="border: none;">
      <div class="documentation-container__header">
        <DataPresentation :list="dataCountList" />
      </div>
    </el-card>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="面试审核" name="1">
        <el-card shadow="never" style="border: none;">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="状态">
              <el-select v-model="form.status" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="是否同意入职">
              <el-select v-model="form.isEntry" clearable placeholder="请选择">
                <el-option v-for="item in isEntry" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="interviewableData" border style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" type="warning">待审核</el-tag>
                <el-tag v-if="scope.row.status == 1" type="success">审核成功</el-tag>
                <el-tag v-if="scope.row.status == 2" type="danger">审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="是否同意入职">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_entry==1" type="success">同意入职</el-tag>
                <el-tag v-if="scope.row.is_entry==3" type="danger">待确认</el-tag>
                <el-tag v-if="scope.row.is_entry==0" type="danger">拒绝入职</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="入职时间">
              <template slot-scope="scope">
                <span v-if="scope.row.is_entry==1">{{ getdate(scope.row.time) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="年龄" prop="age" />
            <el-table-column label="提交时间" prop="created_at" />
            <el-table-column label="应聘部门" prop="department.name" />
            <el-table-column label="应聘职位" prop="position.name" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlerShow(scope.row)">
                  <i class="el-icon-view" /> 查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-if="meta.total"
            style="padding-bottom: 0;margin-top: 0;"
            :page-sizes="[10]"
            :total="meta.total"
            :limit="meta.per_page"
            @pagination="pagination"
          />
        </el-card>

      </el-tab-pane>
      <el-tab-pane label="入职审核" name="2">
        <el-card shadow="never" style="border: none;">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="状态">
              <el-select v-model="form.status" clearable placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit2">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="entryTableData" border style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <span>{{ scope.row.interview.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="应聘部门">
              <template slot-scope="scope">
                <span>{{ scope.row.interview.department.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否入职">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.interview.is_entry == 3" type="warning">未确定</el-tag>
                <el-tag v-if="scope.row.interview.is_entry == 1" type="success">确定入职</el-tag>
                <el-tag v-if="scope.row.interview.is_entry == 0" type="danger">拒绝入职</el-tag>
                <el-tag v-if="scope.row.interview.is_entry == null" type="danger">未填写</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="family_phone" />
            <el-table-column label="提交时间" prop="created_at" />
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 'waiting'" type="warning">待审核</el-tag>
                <el-tag v-if="scope.row.status == 'success'" type="success">审核成功</el-tag>
                <el-tag v-if="scope.row.status == 'fail'" type="danger">审核失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlerShow(scope.row)">
                  <i class="el-icon-view" /> 查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-if="meta.total"
            style="padding-bottom: 0;margin-top: 0;"
            :page-sizes="[10]"
            :total="meta.total"
            :limit="meta.per_page"
            @pagination="pagination"
          />
        </el-card>

      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import DataPresentation from '@/views/personnel-files/components/DataPresentation/DataPresentation'
import { getEntryList, getInterviewList, entryOrInterviewData } from '@/api/entry'
import dayjs from 'dayjs'
export default {
  name: 'Documentation',
  components: { Pagination, DataPresentation },
  data() {
    return {
      // form: {},
      entryTableData: [],
      interviewableData: [],
      activeName: '1',
      form: {
        status: null
      },
      meta: {},
      loading: false,
      options: [
        {
          value: '0',
          label: '等待审核'
        },
        {
          value: '1',
          label: '审核成功'
        },
        {
          value: '2',
          label: '审核失败'
        }
      ],
      options2: [
        {
          value: 'waiting',
          label: '等待审核'
        },
        {
          value: 'success',
          label: '审核成功'
        },
        {
          value: 'fail',
          label: '审核失败'
        }
      ],
      pageData: {},
      isEntry: [
        {
          value: 1,
          label: '同意入职'
        },
        {
          value: 3,
          label: '待确认'
        },
        {
          value: 0,
          label: '拒绝入职'
        }
      ],
      dataInfo: {}
    }
  },
  computed: {
    dataCountList() {
      const { entry, entryCount, interview, interviewCount } = this.dataInfo
      return [
        {
          label: '入职人数',
          value: entry,
          icon: 'entry-count'
        },
        {
          label: '入职待审核',
          value: entryCount,
          icon: 'entry-approval'
        },
        {
          label: '面试人数',
          value: interview,
          icon: 'interview-count'
        },
        {
          label: '面试待审核',
          value: interviewCount,
          icon: 'to-be-reviewed'
        }
      ]
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    // this.getEntryLists();
    this.init()
  },
  methods: {
    init() {
      Promise.allSettled([
        this.getInterviewLists(),
        this.getEntryOrInterviewData()
      ])
    },
    async getEntryOrInterviewData() {
      try {
        const res = await entryOrInterviewData()
        this.dataInfo = res.data
        console.log('res ------>', res)
      } catch (error) {
        console.log('error ------>', error)
      }
    },
    getdate(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    async getEntryLists() {
      this.loading = true
      const res = await getEntryList(Object.assign(this.form, this.pageData))
      console.log(res)
      this.entryTableData = res.data
      this.meta = res.meta
      this.loading = false
    },
    async getInterviewLists() {
      this.loading = true
      const res = await getInterviewList(
        Object.assign(this.form, this.pageData)
      )
      console.log(this.form, 'res')
      console.log(this.pageData, 'res')
      this.interviewableData = res.data
      this.meta = res.meta
      this.loading = false
    },
    pagination(page) {
      this.pageData.page = page.page
      this.pageData.paginate = page.limit
      if (this.activeName == 1) {
        this.getInterviewLists()
      } else {
        this.getEntryLists()
      }
    },
    onSubmit() {
      this.pageData.page = 1
      this.getInterviewLists()
    },
    onSubmit2() {
      this.pageData.page = 1
      this.getEntryLists()
    },
    handlerShow(data) {
      if (this.activeName == '1') {
        this.$router.push({
          path: `/entry/show/${data.id}`,
          query: { tag_title: data.name + '-面试详情' }
        })
      } else {
        this.$router.push({
          path: `/entry/finish/show/${data.id}`,
          query: { tag_title: data.interview.name + '-入职详情' }
        })
      }
    },
    handleClick(type, e) {
      console.log(type, e)
      this.form = {}
      switch (this.activeName) {
        case '1':
          this.getInterviewLists()
          break
        case '2':
          this.getEntryLists()
          break
      }
    }
  }
}
</script>

      <style lang="scss" scoped>
  .documentation-container {
    .demo-form-inline{
      margin-top: 5px;
    }
    .document-btn {
      flex-shrink: 0;
      display: block;
      cursor: pointer;
      background: black;
      color: white;
      height: 60px;
      padding: 0 16px;
      margin: 16px;
      line-height: 60px;
      font-size: 20px;
      text-align: center;
    }
  }
  </style>
